@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	font-family: "华文彩云";
	font-size: 70px;
}

body{
	background: url(../tutu/home.jpg);
	background-size: 100% 100vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	animation: bgChange 12s linear infinite;
	min-height: 100vh; /* 确保页面铺满屏幕 */
	overflow: hidden; /* 隐藏滚动条，避免元素跑出屏幕 */
	
}
@keyframes bgChange{
	0%{
		background-image: url(../tutu/home.jpg);
		background-size: 100% 100%;
	}
	59.99%{/*转换背景*/
		background-image: url(../tutu/home.jpg);
		background-size: 100% 100%;
	}
	60%{
		background-image: url(../tutu/room.jpg);
		background-size: 100% 100%;
	}
	100%{
		background-image: url(../tutu/room.jpg);
		background-size: 100% 100%;
	}
}
.cake1{
	width: 50px;
	height: 40px;
	bor der: 1px solid red;
	background: url(../tutu/cake1.png);
	background-size: 100% 100%;
	position: relative;
	top: 222px;
	left: 760px;
	z-index: 20;
	animation: cake1 12s linear infinite;
}
@keyframes cake1{
	0%{
		top: 222px;
		left: 760px;
		background: url(../tutu/cake1.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	30%{
		top: 222px;
		left: 760px;
		background: url(../tutu/cake1.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	35%{
		top: 222px;
		left: 760px;
		background: url(../tutu/cake1.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	35.01%{
		top: 220px;
		left: 500px;
		background: url(../tutu/cake1.png);
		background-size: 100% 100%;
		opacity: 0;
		visibility: hidden;
	}
	100%{
		top: 220px;
		left: 500px;
		background: url(../tutu/cake1.png);
		background-size: 100% 100%;
		opacity: 0;
		visibility: hidden;
	}
}
.mother{
	width: 200px;
	height: 400px;
	bor der: 1px solid red;
	background: url(../tutu/mother1.png);
	background-size: 100% 100%;
	position: absolute;
	top: 35px;
	left: 550px;
	z-index: 999;
	animation: mother 12s linear infinite;
}
@keyframes mother{
		/* 0-4秒：常态妈妈（原mother1），隐藏动态/发火状态 */
	0%{
		top: 35px;
		left: 550px;
		background: url(../tutu/mother1.png);/*常态妈妈*/
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	39.99%{
		top: 35px;
		left: 550px;
		background: url(../tutu/mother1.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	40%{
		top: 35px;
		left: 550px;
		background: url(../tutu/mother2.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	50%{
		top: 35px;
		left: 868px;
		background: url(../tutu/mother2.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	59.99%{
		top: 297px;
		left: 1200px;
		background: url(../tutu/mother2.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	60%{
		top: 297px;
		left: 1246px;
		background: url(../tutu/mother3.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	70%{
		top: 297px;
		left: 1246px;
		background: url(../tutu/mother3.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	100%{
		top: 297px;
		left: 1246px;
		background: url(../tutu/mother3.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
}
.tutu{
	width: 100px;
	height: 200px;
	/*判断选择器是否选中*/
	bor der: 1px solid red;
	/* 背景图片 复合属性 */
	background: url(../tutu/tutu1.png);
	/* 出现背景-背景图大于空间--设置背景尺寸 */
	background-size: 100% 100%;
	/* 相对定位 */
	position: relative;
    top: 429px;
	left: 40px;
	z-index: 15;
	animation: tutu 12s linear infinite;
}
@keyframes tutu{
	0%{
		left: 40px;
		top: 429px;
		background: url(../tutu/tutu1.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	10%{
		top: 429px;
		left: 150px;
		background: url(../tutu/tutu2.png);
		background-size: 100% 100%;
		opacity: 1;
	    visibility: visible;
	}
	15%{
		top: 409px;
		left: 300px;
		background: url(../tutu/tutu3.png);
		background-size: 100% 100%;
		opacity: 1;
	    visibility: visible;
	}
	20%{
		top: 388px;
		left: 450px;
		background: url(../tutu/tutu4.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	30%{
		top: 379px;
		left: 526px;
		background: url(../tutu/tutu5.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	
	40%{
		top: 342px;
		left: 724px;
		background: url(../tutu/tutu6.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
		
	}
	50%{
		top: 413px;
		left: 1050px;
		background: url(../tutu/tutu7.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	60%{
		top: 410px;
		left: 1300px;
		background: url(../tutu/tutu8.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	60.01%{
		top: 410px;
		left: 1300px;
		background: url(../tutu/tutu8.png);
		background-size: 100% 100%;
		opacity: 0;
		visibility: hidden;
	}
	100%{
		top: 410px;
		left: 1300px;
		background: url(../tutu/tutu8.png);
		background-size: 100% 100%;
		opacity: 0;
		visibility: hidden;
	}
}
.cake2{
	width: 50px;
	height: 40px;
	bor der: 1px solid red;
	background: url(../tutu/cake2.png);
	background-size: 100% 100%;
	position: relative;
	top: 365px;
	left: 1186px;
	animation: cake2 12s linear infinite;
}
@keyframes cake2{
	0%{
		top: 365px;
		left: 1186px;
		background: url(../tutu/cake2.png);
		background-size: 100% 100%;
		opacity: 0;
		visibility: hidden;
	}
	59.99%{
		top: 365px;
		left: 1186px;
		background: url(../tutu/cake2.png);
		background-size: 100% 100%;
		opacity: 0;
		visibility: hidden;
	}
	60%{
		top: 365px;
		left: 1186px;
		background: url(../tutu/cake2.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
	100%{
		top: 365px;
		left: 1186px;
		background: url(../tutu/cake2.png);
		background-size: 100% 100%;
		opacity: 1;
		visibility: visible;
	}
}
.TuTu{
	width: 100px;
	height: 200px;
	bor der: 1px solid red;
	background: url(../tutu/TuTu.png);
	background-size: 100% 100%;
	position: absolute;
	top: 435px;
	left: 1137px;
	z-index: 15;
	animation: TuTu 12s linear infinite;
}
@keyframes TuTu{
	0%{
		top: 435px;
		left: 1137px;
		background: url(../tutu/TuTu.png);
		background-size: 100% 100%;
		transform: rotate(0deg) scale(1);
		opacity: 0;
		visibility: hidden;
	}
	59.99%{
		top: 435px;
		left: 1137px;
		background: url(../tutu/TuTu.png);
		background-size: 100% 100%;
		transform: rotate(0deg) scale(1);
		opacity: 0;
		visibility: hidden;
	}
	60%{
		top: 435px;
		left: 1137px;
		background: url(../tutu/TuTu.png);
		background-size: 100% 100%;
		transform: rotate(0deg) scale(1);
		opacity: 1;
		visibility: visible;
		
	}
	80%{
		top: 271px;
		left: 860px;
		background: url(../tutu/TuTu.png);
		background-size: 100% 100%;
		transform: rotate(150deg) scale(0.7);
		opacity: 1;
		visibility: visible;
	}
	100%{
		top: 117px;
		left: 580px;
		background: url(../tutu/TuTu.png);
		background-size: 100% 100%;
		transform: rotate(300deg) scale(0.5);
		opacity: 1;
		visibility: visible;
	}
}
